<template>
  <span>{{ fullValue }}</span>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      tweeningValue: 0,
    };
  },
  computed: {
    fullValue() {
      return Math.floor(this.tweeningValue);
    },
  },
  methods: {
    tween(newValue, oldValue) {
      gsap.to(this.$data, {
        duration: 0.5,
        tweeningValue: newValue,
        ease: "sine",
      });
    },
  },
  watch: {
    value(newValue, oldValue) {
      this.tween(newValue, oldValue);
    },
  },
  mounted() {
    this.tween(this.value, 0);
  },
};
</script>

<style>
</style>